<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="Description" content="ARCHIVE"/>
		<meta name="Keywords" content="ARCHIVE"/>
		<meta name="render" content="webkit"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>service</title>
		<link rel="shortcut icon" href=""/>
		<link href="//cdn.bootcss.com/normalize/5.0.0/normalize.min.css" rel="stylesheet">
		<link rel="stylesheet" href="vendor/font-awesome-4.6.3/css/font-awesome.min.css" />
		<!--<link rel='stylesheet' id='javin-font-css'  href='http://static.jiawin.com/wp-content/themes/jiawin/css/font-awesome.min.css?ver=1463202082' type='text/css' media='all' />-->
		<link rel="stylesheet" href="dist/core.css" />
		<script src="vendor/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="vendor/lazyload-js.js" type="text/javascript" charset="utf-8"></script>
		
		<!--[if lt IE 9]>
			<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<header class="common-header">
			<div class="wrapper">
				<div class="common-header-topbar">
					<a href="" class="common-header-topbar-logo">
						<img class="lazy" src="img/about/07-02_03.png" data-original="img/about/07-02_03.png"/>
					</a>
					<div class="common-header-topbar-link clearfix">
						<i class="fa fa-twitter"></i>
						<i class="fa fa-facebook-f"></i>
						<i class="fa fa-rss"></i>
					</div>
				</div>
				<div class="common-header-site clearfix">					
					<ul class="about-nav">
						<li><a href="home.html">HOME</a></li>
						<li><a href="portfolio.html">PORTFOLIO</a></li>
						<li><a href="about.html">ABOUT</a></li>
						<li><a href="service.html" class="about-nav-active">SERVICES</a></li>
						<li><a href="archive.html">ARCHIVE</a></li>
						<li><a href="blog.html">BLOG</a></li>
						<li><a href="blog-detail.html">OTHER PAGES</a></li>
						<li><a href="contact-us.html">CONTACT US</a></li>
					</ul>
					<i class="fa fa-search"></i>
				</div>
				<div class="common-header-nav-bar">
					<i class="fa fa-bars" id="navbar"></i>
					<i class="fa fa-user"></i>
					<p><a href="#"><img src="img/index/07-02_03.png" alt="" /></a></p>
				</div>
				<ul class="common-header-hide-nav" id="hidenav">
					<li><a href="home.html">HOME</a></li>
					<li><a href="portfolio.html">PORTFOLIO</a></li>
					<li><a href="about.html" >ABOUT</a></li>
					<li><a href="service.html" class="about-nav-active">SERVICES</a></li>
					<li><a href="ARCHIVE.html">ARCHIVE</a></li>
					<li><a href="blog.html">BLOG</a></li>
					<li><a href="blog-detail.html">OTHER PAGES</a></li>
					<li><a href="contact-us.html">CONTACT US</a></li>
				</ul>
			</div>
			<div class="title">
				<div class="wrapper">
					<h1>SERVICES</h1>
				</div>
			</div>
		</header>
		<article class="service-model1">
			<header class="about-content-team-header">
					<h2 data-scroll-reveal="enter from the top and move 50px after 0.2s">WE ARE A SMALL TEAM DOING BIG THINGS!</h2>
					<p data-scroll-reveal="wait .5s and then ease-in-out 50px">Lorem ipsum dolor sit amet,consectetur adlipiscing elit.Praesent justo ligula,interdum ut lobortis quis,interdum vitate</p>
					<p data-scroll-reveal="wait .5s and then ease-in-out 50px">metus,Proin fringilla metus non nulla ccursus,sit amet rutrum est pretium.</p>
				</header>
			<div class="model1-content">
				<div class="content-left">
					<article class="left-model model" id="model1" data-scroll-reveal="enter left and then ease-in-out 50px">
						<img src="img/service/07-08_03.jpg" data-original="img/service/07-08_03.jpg" class="lazy left-img img" id="img1"/>
						<div class="left-message">
							<h3 id="model-title1">SERVICE TITLE1</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeesnt lato justo liguia, interdum ut lobortis quis nulla sit amet rutest.</p>
						</div>
					</article>
					<article class="left-model model" id="model2" data-scroll-reveal="enter left wait 0.5s and then ease-in-out 50px">
						<img src="img/service/07-08_09.jpg" data-original="img/service/07-08_09.jpg" class="lazy left-img img" id="img2"/>
						<div class="left-message">
							<h3 id ="model-title2">SERVICE TITLE2</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeesnt lato justo liguia, interdum ut lobortis quis nulla sit amet rutest.</p>
						</div>
					</article>
					<article class="left-model model" id="model3" data-scroll-reveal="enter left wait 1s and then ease-in-out 50px">
						<img src="img/service/07-08_13.png" data-original="img/service/07-08_13.png" class="lazy left-img img" id="img3"/>
						<div class="left-message">
							<h3 id="model-title3">SERVICE TITLE3</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeesnt lato justo liguia, interdum ut lobortis quis nulla sit amet rutest.</p>
						</div>
					</article>
				</div>
				<div class="content-right">
					<article class="right-model model" id="model4" data-scroll-reveal="enter right and then ease-in-out 50px">
						<img src="img/service/07-08_05.jpg" data-original="img/service/07-08_05.jpg" class="lazy left-img img" id="img4"/>
						<div class="right-message">
							<h3 id="model-title4">SERVICE TITLE4</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeesnt lato justo liguia, interdum ut lobortis quis nulla sit amet rutest.</p>
						</div>
					</article>
					<article class="right-model model" id="model5" data-scroll-reveal="enter right wait 0.5s and then ease-in-out 50px">
						<img src="img/service/07-08_10.jpg" data-original="img/service/07-08_10.jpg" class="lazy left-img img" id="img5"/>
						<div class="right-message">
							<h3 id="model-title5">SERVICE TITLE5</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeesnt lato justo liguia, interdum ut lobortis quis nulla sit amet rutest.</p>
						</div>
					</article>
					<article class="right-model model" id="model6" data-scroll-reveal="enter right wait 1s and then ease-in-out 50px">
						<img src="img/service/07-08_14.jpg" data-original="img/service/07-08_14.jpg" class="lazy left-img img" id="img6"/>
						<div class="right-message">
							<h3 id="model-title6">SERVICE TITLE6</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeesnt lato justo liguia, interdum ut lobortis quis nulla sit amet rutest.</p>
						</div>
					</article>
				</div>
			</div>
		</article>
		<article class="service-model2">
			<div class="model2-content">
				<h2 data-scroll-reveal="enter top and then ease-in-out 50px">PRICING TABLE EXAMPLE</h2>
				<p data-scroll-reveal="enter bottom and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent justo ligula, interdum ut lobortis quis, interdum vitae metus. Proin fringilla metus non nulla cursus, sit amet rutrum est pretium.</p>
				<article class="content-details" data-scroll-reveal="enter left wait 1.5s and then ease-in-out 50px">
					<header class="details-header">
						<h3>BASIC</h3>
					</header>
					<dl>
						<dt><img class="lazy" src="img/service/services-model2-img1.png" data-original="img/services-model2-img1.png"/></dt>
						<dd>Custom Design</dd>
						<dd>3 or Less Pages</dd>
						<dd>Basic SEO</dd>
						<dd>Contact Form</dd>
						<dd>Updates Allowed</dd>
					</dl>
					<footer class="details-footer">
						<a href="#">FULL DETAILS</a>
					</footer>
				</article>
				<article class="content-details" data-scroll-reveal="enter left wait 1s and then ease-in-out 150px">
					<header class="details-header">
						<h3>BASIC</h3>
					</header>
					<dl>
						<dt><img class="lazy" src="img/service/services-model2-img2.png" data-original="img/services-model2-img1.png"/></dt>
						<dd>Custom Design</dd>
						<dd>3 or Less Pages</dd>
						<dd>Basic SEO</dd>
						<dd>Contact Form</dd>
						<dd>Updates Allowed</dd>
					</dl>
					<footer class="details-footer">
						<a href="#">FULL DETAILS</a>
					</footer>
				</article>
				<article class="content-details" data-scroll-reveal="enter left wait 0.5s and then ease-in-out 50px">
					<header class="details-header">
						<h3>BASIC</h3>
					</header>
					<dl>
						<dt><img class="lazy" src="img/service/services-model2-img3.png" data-original="img/services-model2-img1.png"/></dt>
						<dd>Custom Design</dd>
						<dd>3 or Less Pages</dd>
						<dd>Basic SEO</dd>
						<dd>Contact Form</dd>
						<dd>Updates Allowed</dd>
					</dl>
					<footer class="details-footer">
						<a href="#">FULL DETAILS</a>
					</footer>
				</article>
				<article class="content-details" data-scroll-reveal="enter left and then ease-in-out 50px">
					<header class="details-header">
						<h3>BASIC</h3>
					</header>
					<dl>
						<dt><img class="lazy" src="img/service/services-model2-img4.png" data-original="img/services-model2-img1.png"/></dt>
						<dd>Custom Design</dd>
						<dd>3 or Less Pages</dd>
						<dd>Basic SEO</dd>
						<dd>Contact Form</dd>
						<dd>Updates Allowed</dd>
					</dl>
					<footer class="details-footer">
						<a href="#">FULL DETAILS</a>
					</footer>
				</article>
			</div>
		</article>
		<article class="service-model3">
			<div class="model3-content">
				<article class="content-message">
					<div>
						<h3 data-scroll-reveal="enter top and then ease-in-out 50px">GOOD TO KNOW</h3>
						<p data-scroll-reveal="enter left and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ouisque sodales pures vel nunc elementum rhoncus. Praesent neque metus, mollis sit amet convalis ut, tempus porta arcu. Phaselus accumsan facilisis viverra. Sed a velit sit amet nunc aliquam consectetur.</p>
				</div>
				<div>
						<h3 data-scroll-reveal="enter top and then ease-in-out 50px">COOL FEATURE</h3>
						<p data-scroll-reveal="enter left and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ouisque sodales pures vel nunc elementum rhoncus. Praesent neque metus, mollis sit amet convalis ut, tempus porta arcu. Phaselus accumsan facilisis viverra. Sed a velit sit amet nunc aliquam consectetur.</p>
				</div>
				<div>
						<h3 data-scroll-reveal="enter top and then ease-in-out 50px">SOMETHING ELSE TO KNOW</h3>
						<p data-scroll-reveal="enter left and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ouisque sodales pures vel nunc elementum rhoncus. Praesent neque metus, mollis sit amet convalis ut, tempus porta arcu. Phaselus accumsan facilisis viverra. Sed a velit sit amet nunc aliquam consectetur.</p>
				</div>
				</article>
			</div>
			<section class="about-content-team-joinus about-content-more">
				<header class="team-joinus">
						<h2 data-scroll-reveal="enter from the top and move 50px after 0.5s">IF YOU WHAT YOU SEE,JOIN US!</h2>
						<p data-scroll-reveal="wait 0.5s and then ease-in-out 50px">Lorem ipsum dolor sit amet,consectetur adlipiscing elit.Praesent justo ligula,interdum ut lobortis quis,interdum vitate</p>
						<p data-scroll-reveal="wait 0.5s and then ease-in-out 50px">metus,Proin fringilla metus non nulla ccursus,sit amet rutrum est pretium.</p>
						<a data-scroll-reveal="wait .5s">APPLY TODA</a>
					</header>
			</section>
		</article>
		<footer class="common-footer">
			<div class="wrapper">
				<div class="common-footer-centent clearfix">
					<article class="common-footer-centent-left">
						<a href="" class="common-header-topbar-logo">
							<img src="img/about/捕获.JPG" data-original="img/about/捕获.JPG" data-scroll-reveal="enter left wait 1s and then ease-in-out 50px">
						</a>
						<div class="common-header-topbar-link clearfix" data-scroll-reveal="enter left and then ease-in-out 50px">
							<i class="fa fa-twitter"></i>
							<i class="fa fa-facebook-f"></i>
							<i class="fa fa-rss"></i>
						</div>
						<p data-scroll-reveal=" then ease-in-out 50px">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida quam quis nunc rutrum placerat. Proin eu mi vitae neque veh interdum id nec turpis nam auctor faucibus sollicitudin.
						</p>
					</article>
					<article>
						<dl>
							<dt data-scroll-reveal="enter top and then ease-in-out 50px">CONTACT INFO</dt>
							<dd data-scroll-reveal="enter bottom and then ease-in-out 50px">222 Ave C South</dd>
							<dd data-scroll-reveal="enter bottom wait 0.2s and then ease-in-out 50px">Saskatoon</dd>
							<dd data-scroll-reveal="enter bottom wait 0.4s and then ease-in-out 50px">Canada S7K 2N5</dd>
							<dd data-scroll-reveal="enter bottom wait 0.6s and then ease-in-out 50px">info@deliver.ca</dd>
							<dt class="num" data-scroll-reveal="enter bottom wait 0.8s and then ease-in-out 50px">1.306.222.3456</dt>
						</dl>
					</article>
					<article>
						<dl class="quicklinks">
							<dt data-scroll-reveal="enter top and then ease-in-out 50px">QUICK LINKS</dt>
							<dd data-scroll-reveal="enter bottom and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>Portfolio</dd>
							<dd data-scroll-reveal="enter bottom wait 0.2s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>About </dd>
							<dd data-scroll-reveal="enter bottom wait 0.4s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>ARCHIVE</dd>
							<dd data-scroll-reveal="enter bottom wait 0.6s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>Blog</dd>
							<dd data-scroll-reveal="enter bottom wait 0.8s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>Dropdown</dd>
							<dd data-scroll-reveal="enter bottom wait 1s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>contact Us</dd>
						</dl>
					</article>
					<article class="common-footer-centent-right">
						<dl>
							<dt data-scroll-reveal="enter right and then ease-in-out 50px">NEWSLTTER</dt>
							<dd data-scroll-reveal="ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
						</dl>
						<input type="text" name="" id="" value="" placeholder="Emali" data-scroll-reveal="enter right and then ease-in-out 50px"/>
						<a href="#" class="ok" data-scroll-reveal="enter right and then ease-in-out 50px">OK</a>
					</article>
				</div>
				<div class="common-footer-button">
					<span class="copyright">
						copyright 2013
						<a href="#">Deliver</a>						
						. All Rights Reserved.
					</span>
					<span class="friendlink">
						<a href="#">ABOUT/</a>
						<a href="#">PRIVACY POLICY/</a>
						<a href="#">CONTACT</a>
					</span>
				</div>
			</div>
		</footer>
		
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$("img").lazyload({
					placeholder: "images/loading.gif",
					effect: "fadeIn"
				});
			});
		</script>
		<script src="dist/core.js" type="text/javascript"></script>
		<script src="vendor/scrollReveal.js"></script>
		<script>
			(function() {
				window.scrollReveal = new scrollReveal({
					reset: true,
					move: '50px'
				});
			})();
		</script>
	</body>
</html>
